import styled from 'styled-components'
import lanIcon from '@/static/img/lan.png'
import wanIcon from '@/static/img/wan.png'

export const InterfaceModeWrapper = styled.section`
  .interface{
  width: 800px;
  }
  .interface-wrapper{
    width:800px;
    overflow: hidden;
  }
`;
export const InterfaceWrapper = styled.div`

      width: 150px;
      height: 180px;
      padding: 20px;
      float: left;
      text-align: center;
      border: ${(props) => props.wanCount ? 'dashed 1px #1890FF' : 'none'};
      .interface-icon{
          width: 70px;
          height: 70px;
          margin: 0 auto 6px;
      }
      .wan-icon{
          background: url(${wanIcon});
          background-size: contain;
      }
      .lan-icon{
          background: url(${lanIcon});
          background-size: contain;
      }
      .button{
           margin: 8px auto 0;
      }
`;
export const ProgressWrapper = styled.div`
    display: ${props => props.progressVisible ? 'block' : 'none'};
`
